<script lang='ts' setup name='App'>  
 import { ref ,computed } from 'vue' 

 let firstName = ref('')
 let lastName = ref('')



//  let fullname = computed(()=>{
//     return firstName.value + lastName.value
//  })


 let fullname = computed({

      get(){
        return firstName.value + "-"+ lastName.value
      },


      set(val) {
        
        // console.log(
        //   '%c val: ',
        //   'background-color: #3756d4; padding: 4px 8px; border-radius: 2px; font-size: 14px; color: #fff; font-weight: 700;',
        //   val 
        // )
        // this. = v;

        firstName.value = val.split("-")[0]
        lastName.value = val.split("-")[1]
      }



 })



</script>  
  
<template>  

firstName: <input type="text" v-model="firstName"> <br>
lastName: <input type="text" v-model="lastName">


  <!-- <div>{{ fullname }} </div> -->


  <div>
    <input type="text" v-model="fullname">
  </div>

  <!-- <div>{{ firstName +lastName }} </div> -->





  
</template>  
  
<style scoped>  

</style>  




